<template>
  <view class="content">
    <view class="head">
      <view class="my-collect-tabs">
        <view
          :class="currentIndex == 2 ? 'tab on' : 'tab'"
          @click="selectClick(2, 'mp-toutiao')"
          >抖音</view
        >
        <view
          :class="currentIndex == 5 ? 'tab on' : 'tab'"
          @click="selectClick(5, 'mp-kuaishou')"
          >快手</view
        >
        <view
          :class="currentIndex == 3 ? 'tab on' : 'tab'"
          @click="selectClick(3, 'mp-weixin')"
          >微信</view
        >
        <view
          :class="currentIndex == 4 ? 'tab on' : 'tab'"
          @click="selectClick(4, 'mp-qq')"
          >QQ</view
        >
      </view>
      <template v-if="ecpmInfo">
        <view class="ecpm-info">
          <view class="ecpm-text" @click="clickEcpm">
            <text>ECPM收益</text>
            <u-icon name="error-circle"></u-icon>
          </view>
          <view class="ecpm-date" @click="selectDate">
            <text class="date">{{ date }}</text>
            <u-icon name="arrow-down"></u-icon>
          </view>
        </view>
        <view class="commission">
          <!-- <view class=""> 分佣比例：{{ ecpmInfo.author_proportion }}% </view> -->
          <view class=""> 预估ECPM：{{ ecpmInfo.estimate_avg_ecpm }}</view>
        </view>
        <view class="my-grid">
          <view class="item-grid">
            <view class="grid-num">{{ ecpmInfo.download_num }}</view>
            <view class="grid-text">下载次数</view>
          </view>
          <view class="item-grid">
            <view class="grid-num">{{ ecpmInfo.final_avg_ecpm }}</view>
            <view class="grid-text">实际ECPM</view>
          </view>
          <view class="item-grid">
            <view class="grid-num">{{ ecpmInfo.estimate_income }}</view>
            <view class="grid-text">预估金额</view>
          </view>
          <view class="item-grid">
            <view class="grid-num">{{ ecpmInfo.final_income }}</view>
            <view class="grid-text">实际金额</view>
          </view>
        </view>
      </template>
    </view>
    <view class="list">
      <view class="item">
        <view class="title">
          本月eCPM走势，本月平均eCPM：<text class="m">{{
            avgEcpm ? avgEcpm : "更新中"
          }}</text>
        </view>
        <view class="data">
          <qiun-data-charts type="area" :opts="opts" :chartData="chartsData1" />
        </view>
      </view>
      <view class="item">
        <view class="title">
          本月收益走势，本月总收益：<text class="m">{{ totalMoney }}</text>
        </view>
        <view class="data">
          <qiun-data-charts type="area" :opts="opts" :chartData="chartsData2" />
        </view>
      </view>
      <!-- <view class="item">
        <view class="title">
          近20日访问走势，近20日总访问量:<text class="m">{{ totalView }}</text>
        </view>
        <view class="data">
          <qiun-data-charts type="area" :opts="opts" :chartData="chartsData3" />
        </view>
      </view> -->
    </view>
    <u-picker
      v-model="show"
      mode="time"
      confirm-color="#56d39d"
      @confirm="openDate"
    ></u-picker>
  </view>
</template>

<script>
import QiunDataCharts from '@/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
import { userIncomeByDate, getUserArtworksOrderByMonth } from '@/api/applet';
export default {
  components: {
    QiunDataCharts
  },
  data() {
    return {
      currentIndex: 2,
      show: false,
      date: "2022",
      opts: {
        color: ["#56d39d", "#0ca678"],
        fontSize: 10,
        padding: [20, 20, 0, 0],
        fontColor: "#333333",
        legend: {
          show: false,
        },
        dataLabel: false, //数据
        xAxis: {
          axisLine: "#e7f5ff",
          axisLineColor: "#e7f5ff",
          gridColor: "#e7f5ff",
          disableGrid: false,
          boundaryGap: "justify",
          gridType: "dash",
          dashLength: 10,
          labelCount: 5,
          rotateAngle: 45,
        },
        yAxis: {
          gridColor: "#e7f5ff",
          gridType: "dash",
          dashLength: 10,
          data: [
            {
              axisLineColor: "#e7f5ff",
              gridType: "dash",
              disableGrid: false,
              dashLength: 10,
            },
          ],
        },
        extra: {
          area: {
            type: "curve", //圆角
          },
          column: {
            width: 12,
            linearType: "custom",
            seriesGap: 5,
            linearOpacity: 0.5,
            barBorderCircle: true,
            customColor: ["#ffcc00", "#63e6be"],
          },
        },
      },
      chartsData1: {},
      chartsData2: {},
      chartsData3: {},
      modelId: "mp-toutiao",
      avgEcpm: 0,
      totalMoney: 0,
      totalView: 0,
      ecpmInfo: null,
    };
  },
  async onLoad() {
    let date = this.getNowFormatDate();
    this.date = date;
    this.getWechatMapListRecord();
    this.getUserIncomeByDate(date);
  },
  methods: {
    //选择平台
    selectClick(index, type) {
      let that = this;
      that.currentIndex = index;
      that.modelId = type;
      this.getWechatMapListRecord();
      this.getUserIncomeByDate(that.date);
    },
    // ecpm
    clickEcpm() {
      uni.showModal({
        title: "eCPM和eCPM是浮动说明",
        content: "“eCPM”：eCPM是CPM的单价，即该广告位每展示一千次的价格，也就是千次的广告完播价格,该价格是一个浮动的值，每天不同。“eCPM是浮动说明”：由于互联网广告的特殊性，每次广告的展示机会都是由多个不同的广告主竞价拍卖获得，所以单次广告展示机会的价格并不固定。当日的千次广告完播，只有在次日才会显示实际单价。",
        showCancel: false,
        confirmColor: "#56d39d",
        confirmText: "知道了",
      });
    },
    selectDate() {
      this.show = true;
    },

    // 确定选择时间
    openDate(e) {
      let date = e.year + "-" + e.month + "-" + e.day;
      this.date = date;
      this.getUserIncomeByDate(date);
      this.getWechatMapListRecord();
    },

    // 获取指定日期
    getUserIncomeByDate(date) {
      let that = this;
      userIncomeByDate({
        date: date,
        platform_type: that.modelId,
      })
      .then((result) => {
        if (result.code == 200 && result.data) {
          that.ecpmInfo = result.data;
        } else {
          uni.showToast({
            icon: "none",
            title: result.msg,
          });
        }
      });
    },

    // 获取最近30天访问量等
    getWechatMapListRecord() {
      let that = this;
      getUserArtworksOrderByMonth({
        date: this.date,
        platform_type: that.modelId,
      })
      .then((result) => {
        that.avgEcpm = result.data.avgEcpm;
        that.totalMoney = result.data.totalMoney;
        // that.totalView = result.data.totalView;
        that.chartsData1 = result.data.ecpm;
        that.chartsData2 = result.data.money;
        // that.chartsData3 = result.data.view;
      });
    },

    // 获取当前日期函数
    getNowFormatDate() {
      let date = new Date(),
        seperator1 = "-", //格式分隔符
        year = date.getFullYear(), //获取完整的年份(4位)
        month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
        strDate = date.getDate(); // 获取当前日(1-31)
      if (month >= 1 && month <= 9) month = "0" + month; // 如果月份是个位数，在前面补0
      if (strDate >= 0 && strDate <= 9) strDate = "0" + strDate; // 如果日是个位数，在前面补0

      let currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
  },
};
</script>

<style lang="scss">
.head {
  background-color: $uni-color-primary;
  padding: 20rpx;
  color: #fff;
}

.my-collect-tabs {
  display: flex;
  align-items: center;
  background-color: $uni-color-primary;
  border-radius: 16rpx;
}

.my-collect-tabs .tab {
  width: 100%;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #fff;
  text-align: center;
}

.my-collect-tabs .tab.on {
  position: relative;
  background-color: #fff;
  color: $uni-color-primary;
  border-radius: 16rpx;
}

.ecpm-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
}

.ecpm-info text {
  margin-right: 10rpx;
}

.ecpm-info .ecpm-date {
  background-color: #fff;
  padding: 10rpx 20rpx;
  color: $uni-color-primary;
  border-radius: 30rpx;
  font-size: 20rpx;
}

.commission {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx;
  font-size: 24rpx;
  border-radius: 10rpx;
}

.my-grid {
  margin-top: 20rpx;
  border-radius: 20rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-grid {
  width: 100%;
  text-align: center;
  padding: 30rpx 0;
}

.grid-num {
  font-size: 34rpx;
  color: #000;
  font-weight: bold;
}

.grid-text {
  padding-top: 10rpx;
  color: #666;
}

.list .item {
  margin: 20rpx;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 20rpx;
}

.list .item .title {
  font-size: 24rpx;
  text-align: center;
}

.list .item .title text {
  color: $uni-color-primary;
}

.list .item .data {
  height: 400rpx;
}
</style>
